<template>
  <div id="module">
    <el-container>
      <el-aside :style="{width:asWidth}">
        <div v-show="isCollapse" class="logo"></div>
        <div v-show="!isCollapse" class="title" style="margin-top:10px;display: inline-block;"><span class="s1">ZK</span><span class="s2">&nbsp;物流</span></div>
        <el-menu :default-active="menuIndex" class="el-menu-vertical" :collapse="isCollapse"
          background-color="#545c64" text-color="#fff" active-text-color="#ffffff" :unique-opened="true">
                <el-menu-item index="1" id="borad" @click="goBoard">
                   <i class="el-icon-menu"></i>
                   <span slot="title">看板</span>
                 </el-menu-item>
          <el-submenu v-for="(auth,index) in authList" :index=auth.menuIndex :key="auth.id" class="el-submenu">
            <template slot="title">
              <i :class=auth.icon></i>
              <span slot="title">{{auth.name}}</span>
            </template>
            <el-menu-item-group >

              <el-menu-item v-for="(cauth,cindex) in auth.children"  :index=cauth.menuIndex @click="menu(cauth.url,cauth.menuIndex,auth.name,cauth.name)"><i :class=cauth.icon></i>{{cauth.name}}
              </el-menu-item>

            </el-menu-item-group>
          </el-submenu>
        </el-menu>

      </el-aside>
  <!-- 管理员右上角图标设置-->
      <el-container>
        <el-header height="100px" style="background-color:#264863">
          <li :class="asideClass" @click="handleAside" style="font-weight: 200;font-size: 36px;margin-top: 30px;margin-left: 20px;color: #FFF"></li>
          <div style="float: right;margin-top: 15px; margin-right: 40px">
            <el-badge :value="total" class="item" :hidden="total==0">
              <div style="font-size: 36px;color: white" @click="toAbnormal"><i class="el-icon-warning-outline" ></i></div>
            </el-badge>
          </div>
          <el-dropdown @command="handleCommand" style="float: right; margin-right:30px;">

            <i class="el-icon-s-custom" style="color:#FFF;font-family:黑体;font-size: 24px;font-weight: 600;margin-top: 35px">{{loginUserName}}</i>
            <el-dropdown-menu slot="dropdown">
<!--              <el-dropdown-item command="profile">修改密码</el-dropdown-item>-->
              <el-dropdown-item command="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <el-header height="60px" style="background-color: #f0f3f4;font-size: 20px;font-weight: 700" >
          <el-breadcrumb separator-class="el-icon-arrow-right" style="line-height: 60px;font-size: 20px;font-weight: 700">
            <el-breadcrumb-item :to="{ path: '/Home' }" >首页</el-breadcrumb-item>
            <el-breadcrumb-item v-show="breadcrumbTitle != '' " >{{breadcrumbTitle}}</el-breadcrumb-item>
            <el-breadcrumb-item v-show="breadcrumbIndex != '' "  style="color:#606266;font-size: 20px;font-weight: 700">{{breadcrumbIndex}}</el-breadcrumb-item>
          </el-breadcrumb>
        </el-header>
        <el-main style="background-color:#f0f3f4">
          <main style="height: 100%;">
            <transition name="el-fade-in-linear">
              <router-view @father="getAbnormal"></router-view>
            </transition>
          </main>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  let loginLogSocket;
  let abnormalSocket;
  export default {
    name: "Home",
    data() {
      return {
        //左侧菜单标题是否收起
        isCollapse: false,
        asideClass: 'el-icon-s-fold',
        //权限列表
        authList:[],
        //异常数量
        total:0,
        asWidth:'280px'
      }
    },
    methods: {
      menu(commentName, menuIndex, breadcrumbTitle, breadcrumbIndex) {
        this.$store.commit('menuIndex', menuIndex);
        this.$store.commit('breadcrumbTitle', breadcrumbTitle);
        this.$store.commit('breadcrumbIndex', breadcrumbIndex);
        this.$router.push(commentName).catch(err => {console.info(err)});
      },
      //收起/展开菜单标题
      handleAside() {
        if (!this.isCollapse) {
          this.isCollapse = true;
          this.asideClass = 'el-icon-s-unfold';
          this.asWidth = 'auto'
        } else {
          this.isCollapse = false;
          this.asideClass = 'el-icon-s-fold';
          this.asWidth = '280px'
        }
      },
      //点击头像下拉菜单事件
      handleCommand(command) {
        if (command == 'logout') {
          loginLogSocket.close()
          this.$axios({
            url: 'sys/user/logout',
            method: 'post'
            }
          ).then(res=>{
            this.toLogin();
          }).catch(err=>{
            this.toLogin();
          });
        }
      },
      //请求权限列表
      getAuthList(){
        this.$axios({
          url: 'sys/auth/getCurentAuths',
          method: 'post'
          }
        ).then(res => {
        if(res.data.success){
          console.info(res.data.object)
          this.authList = res.data.object;
        }
      }).catch(err => {
        this.$message.error(err.message);
      });
      },
      //跳转至登录页
      toLogin(){
        this.$store.commit('token','')
        this.$router.push('Login').then()
      },
      //跳转至异常记录页
      toAbnormal(){
        this.menu('DispatchAbnormalRecord','5-2','调度派车','异常记录')
      },
      //获取未受理的异常列表
      getAbnormal(){
        // console.info(100000000000)
        this.$axios({
          url: 'dispatch/abnormal/list',
          method: 'post',
          data: {dispatchTicket: {carNumber: ""},status:'未受理'}
        }).then(res => {
          if (res.data.success) {
            this.total = res.data.object.total;
          }
        }).catch(err => {
          this.$message.error(err.message);
        })
      },
      //跳转至首页看板
      goBoard(){
          this.$router.push('BillboardAll')
          this.$store.commit('breadcrumbTitle', '');
          this.$store.commit('breadcrumbIndex', '');
      },
      //建立WebSocket连接
      connectWebsocket(){
        let url = 'ws://localhost:9090/loginLogSocket/' + this.$store.state.token;
        loginLogSocket = new WebSocket(url);
        let abnormalUrl = 'ws://localhost:9090/abnormalSocket/' + this.$store.state.token;
        abnormalSocket = new WebSocket(abnormalUrl);
        //接受消息
        abnormalSocket.onmessage= (event)=>{
          this.$message.warning("有新异常调度单，请及时处理")
            this.getAbnormal();
        }
      }
    },
    computed: {
      loginUserName() {
        return this.$store.state.loginUserName;
      },
      menuIndex() {
        return this.$store.state.menuIndex;
      },
      breadcrumbTitle() {
        return this.$store.state.breadcrumbTitle;
      },
      breadcrumbIndex() {
        return this.$store.state.breadcrumbIndex;
      }
    },
    created() {
      this.connectWebsocket();
      this.getAbnormal();
      this.getAuthList();
    }
  }
</script>

<style>
/*  title导航栏文字设置*/
  .el-breadcrumb__inner{
    color: #606266 !important;
    font-weight: 700 !important;
    font-size: 20px
  }
/*  title导航栏hover文字设置*/
  .el-breadcrumb__inner:hover{
    color: #209e91 !important;
    font-weight: 700 !important;
    font-size: 20px
  }
/*  左侧导航栏选中项目条背景颜色*/
  .el-menu-item.is-active{
    background-color: #209e91 !important;

  }
/*  二级菜单外边颜色*/
  .el-menu{
    background-color: #213E54 !important;
    padding-right: 10px;
  }
/*  左侧导航栏一级菜单样式*/
  .el-submenu__title{
    width: auto;
    margin-right: 30px;
    margin-left: 20px;
    margin-top: 0px;
    background-color: #213E54 !important;
    font-weight: 500;font-size: 20px
  }
/*  左侧导航栏一级菜单hover样式*/
  .el-submenu__title:hover{
    color: #209e91 !important;
  }
/*  左侧导航栏距离顶部距离和样式*/
  .el-menu-vertical{
    width: 100%;
    background-color: #213E54 !important;
    margin-top:100px;
    margin-right: 5px;

  }
  /*左侧导航栏样式*/
  .el-submenu{
    margin-left: 10px;
    margin-top: 1vh;
  }
/*  左侧导航栏二级菜单样式*/
  .el-menu-item{
    margin-left: 30px;
    background-color: #213E54 !important;
    font-weight: 500;font-size: 15px;
  }
/*  左侧导航栏二级菜单hover样式*/
  .el-menu-item:hover{
    color: #209e91 !important;

}
/*  左边栏样式*/
  .el-aside {
    background-color: #213E54;
    /* width: 280px !important; */
    color: #ffffff;
    text-align: left;
    height: 100%;
    box-shadow: 0 0 2px #209e91;
    overflow: hidden;
  }
/*   页面主体*/
  .el-main {
    text-align: center;
  }
/*   顶部样式*/
  .el-header {
    line-height: 56px;
    border-bottom: 5px solid #E9EEF3;
  }
/*   整体样式*/
  #module {
    height: 100%;
  }

  #app,
  html,
  body,
  .el-container {
    height: 100vh;
    margin: 0;
  }
/* 文本logo样式*/
  .title {
    vertical-align: middle;
    text-align: center;
    width: 100%;
    height: 60px;
    color: rgb(16,196,181);
    font-size: 30px;
    font-weight: 700;
    line-height: 60px;

  }
/*   文本logo zk样式*/
  .s1{
    vertical-align: middle;
    text-align: center;
    width: 100%;
    height: 60px;
    color: rgb(16,196,181);
    font-size: 30px;
    font-weight: 700;
    font-style: italic;
    line-height: 60px;
  }
/*   文本logo 物流样式*/
  .s2{
    vertical-align: middle;
    text-align: center;
    width: 100%;
    height: 60px;
    color: rgb(255,255,255);
    font-size: 30px;
    font-weight: 500;
    line-height: 60px;
  }
/*   图形logo*/
  .logo {
    margin-top: 20px;
    background-image: url(../assets/logo.png);
    height: 60px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
  .el-avatar {
    float: right;
    margin-right: 10px;
    margin-top: 3px;
  }
  .item .el-form-item__label {
    font-weight: 500;
  }
  .el-submenu__icon-arrow{
    margin-top: -3px;
    right:25px
  }
  /*看板*/
  #borad{
    width: auto;
    /* margin-right: 30px; */
    margin-left: 30px;
    font-weight: 500;font-size: 20px
  }
</style>
